<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>马尔代夫度假酒店预订及价格查询,马尔代夫酒店推荐-第六感度假酒店</title>
    <link rel="icon" href="image/public/Logo.ico">
    <link rel="stylesheet" href="element/index.css">
    <link rel="stylesheet" href="css/hotel_list/hotel_list.css">
    <script src="vue/vue.min.js"></script>
    <script src="jquery/jquery-3.6.0.js"></script>
    <script src="element/index.js"></script>
    <script src="axios/axios.min.js"></script>
    <script src="js/api.js"></script>
    <style>
        html {
            font-size: 50px;
        }

        @media screen and (min-width:375px) {
            html {
                font-size: 25px;
            }
        }

        @media screen and (min-width:390px) {
            html {
                font-size: 26px;
            }
        }

        @media screen and (min-width:414px) {
            html {
                font-size: 27.6px;
            }
        }

        @media screen and (min-width:820px) {
            html {
                font-size: 54.6px;
            }
        }

        .bottom ul li {
            margin-top: 0.1rem;
        }

        .bottom-li span {
            line-height: 0.9rem;
        }

        .el-input__inner {
            border: none;
            width: 5rem;
            color: #ff8000;
            height: 1rem;
            font-size: 0.3rem;
        }

        .el-input__inner::-webkit-input-placeholder {
            color: #ff8000;
        }

        .el-input__prefix {
            color: #ff8000;
        }

        .el-input__icon {
            line-height: 25px;
        }
    </style>
</head>

<body>

    <div id="app">
        <div class="top">
            <div style="display: flex;">
                <a href="javascript:history.go(-1);">
                    <img style="margin-top: 0.3rem;margin-left: 0.3rem;" width="25rem"
                        src="image/apartment/向左_o.png" alt="">
                </a>
            </div>
            <p>酒店列表</p>
        </div>

        <div class="main">
            <div class="main-top">
                <div class="main-top-left">
                    <div>
                        <span>住</span>
                        <el-date-picker v-model="value1" type="date" placeholder="入住日期">
                        </el-date-picker>
                    </div>
                    <div>
                        <span>退</span>
                        <el-date-picker v-model="value2" type="date" placeholder="退房日期">
                        </el-date-picker>
                    </div>
                </div>
                <div class="main-top-right">
                    <input type="text" class="villaName" placeholder="请输入名称:" style="font-size: 0.6rem; width: 5rem;" v-model="villa_place">
                    <div style="margin-top: 0.1rem;width: 30px;">
                        <img width="27rem" style="margin-left: 1rem;" @click="findVilla" src="image/hotel_list/搜索.png" alt="">
                    </div>
                </div>
            </div>
            <div class="mainBox">
                <div class="mainBox-list" v-for="(v,i) in villas">
                    <div class="mainBox-list-boxA">
                        <div class="vip">专享优待</div>
                        <div class="place_img"  v-for="(img,ind) in imgs[i]">
                            <img style="width: 100%;" @click="gotoSheet(v)" :src='"image/villa_img/"+ img' alt="">
                        </div>
                        <!-- <a href="dry-sheet.html?villa_id=v.villa_id"> -->
                            <!-- <img style="width: 100%;" src="image/hotel_list/1.jpg"  class="villaImg" alt=""> -->
                        <!-- </a> -->
                        <div class="wrap">
                            <div class="wrap-top">
                                <div class="wrap-top-left">
                                    <p>{{v.villa_name | cut(15)}}</p>
                                </div>
                                <span>{{v.villa_price}}元/起</span>
                            </div>
                            <div class="wrap-bo">
                                <div class="wrap-bo-right" style="margin-top: -0.2rem;">
                                    <span style="font-weight: bold;font-size: 0.6rem;color: #ff8000;">{{v.villa_place}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-bo">
                <div class="main-bo-top">
                    <p>共{{villaNum}}家酒店，没有更多了</p>
                </div>
                <div class="main-bo-bottom">
                    <div>热门酒店</div>
                </div>
            </div>
        </div>

        <div class="hotelBrand" style="display: none;">
            <div>
                <ul>
                    <li>
                        <a href="#">
                            <img src="image/hotel_list/1_logo.png" alt="">
                            <span>四季酒店集团</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="image/hotel_list/8_logo.png" alt="">
                            <span>立鼎世酒店集团</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="image/hotel_list/3_logo.png" alt="">
                            <span>索尼娃酒店集团</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="image/hotel_list/5_logo.png" alt="">
                            <span>六善养生及酒店集团</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="image/hotel_list/2_logo.png" alt="">
                            <span>安纳塔拉酒店度假村及水疗</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="image/hotel_list/7_logo.png" alt="">
                            <span>丽丝卡尔顿酒店</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div>
                <button style="background-color: white;">重置</button>
                <button style="background-color: #ff8000;color:white;">确定</button>
            </div>
        </div>

        <div class="sortBrand" style="display: none;">
            <ul>
                <li>默认排序</li>
                <li>价高优先</li>
                <li>价低优先</li>
            </ul>
        </div>

        <div class="bottom">
            <div id="brand">
                <svg t="1656473585872" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2355" width="25" height="20">
                    <path
                        d="M731.392 102.4H292.1984a68.266667 68.266667 0 0 0-59.460267 34.696533L84.565333 399.530667a68.266667 68.266667 0 0 0 8.0896 78.5408l367.5648 419.84a68.266667 68.266667 0 0 0 102.621867 0.119466l368.366933-418.645333a68.266667 68.266667 0 0 0 8.226134-78.626133L790.869333 137.147733A68.266667 68.266667 0 0 0 731.392 102.4z m-439.1936 68.266667h439.1936l148.565333 263.611733-368.366933 418.6624-367.581867-419.84L292.1984 170.666667z"
                        fill="#515151" p-id="2356"></path>
                    <path
                        d="M699.733333 341.333333v34.133334a34.133333 34.133333 0 0 1-34.133333 34.133333H358.4a34.133333 34.133333 0 0 1-34.133333-34.133333v-34.133334h375.466666z"
                        fill="#515151" p-id="2357"></path>
                </svg>
                <span>品牌</span>
            </div>
            <div id="sort">
                <svg t="1656473940064" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="9823" width="25" height="20">
                    <path
                        d="M437 885.4c-9.4 0-18.6-3.7-25.5-10.5L226.7 690.1c-14.1-14.1-14.1-36.9 0-50.9 14.1-14.1 36.9-14.1 50.9 0L401 762.5V178c0-19.9 16.1-36 36-36s36 16.1 36 36v671.4c0 14.6-8.8 27.7-22.2 33.3-4.5 1.8-9.2 2.7-13.8 2.7zM586 560c-19.9 0-36-16.1-36-36V178c0-14.6 8.8-27.7 22.2-33.3 13.5-5.6 29-2.5 39.2 7.9l169 169.5c14 14.1 14 36.9-0.1 50.9s-36.9 14-50.9-0.1L622 265.1V524c0 19.9-16.1 36-36 36zM802 761H676c-19.9 0-36-16.1-36-36s16.1-36 36-36h126c19.9 0 36 16.1 36 36s-16.1 36-36 36zM802 653H676c-19.9 0-36-16.1-36-36s16.1-36 36-36h126c19.9 0 36 16.1 36 36s-16.1 36-36 36zM802 869H676c-19.9 0-36-16.1-36-36s16.1-36 36-36h126c19.9 0 36 16.1 36 36s-16.1 36-36 36z"
                        p-id="9824"></path>
                    <path d="M586.9 617m-36 0a36 36 0 1 0 72 0 36 36 0 1 0-72 0Z" p-id="9825"></path>
                    <path d="M586.9 725m-36 0a36 36 0 1 0 72 0 36 36 0 1 0-72 0Z" p-id="9826"></path>
                    <path d="M585.9 833m-36 0a36 36 0 1 0 72 0 36 36 0 1 0-72 0Z" p-id="9827"></path>
                </svg>
                <span>默认排序</span>
            </div>
        </div>

        <div class="mask" style="display: none;">

        </div>

    </div>
</body>
<script src="js/hotel_list.js"></script>
</html>